import React from 'react';
import { parseOfdDocument, renderOfd } from 'kc-wpc-ofd';
import request from '@/utils/request';

let fileData;

const TestMain = () => {
  const readFileArrayBuffer = (file: File): Promise<ArrayBuffer> => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (evt) => {
        resolve(evt.target?.result as ArrayBuffer); // 获取返回的结果
      };
      reader.onerror = (e) => {
        reject(e);
      };
      reader.readAsArrayBuffer(file); // 以流的形式读取
    });
  };

  const onClickOfd = async () => {
    const fileUrl = 'https://img.jonhuu.com/demo/ofdDemo.ofd';

    // const fileRes = await request.get(fileUrl, {
    //   headers: {},
    //   responseType: 'arraybuffer',
    // });
    // console.log('fileData', fileData);

    parseOfdDocument({
      ofd: fileData,
      // secret: '',
      success(res) {
        // 输出ofd每页的div
        const screenWidth = 1000;
        const divs = renderOfd(screenWidth, res[0]);
        const contentDiv = document.getElementById('content');
        if (contentDiv) {
          contentDiv.innerHTML = '';
          for (const div of divs) {
            contentDiv?.appendChild(div);
          }
        }
        // 获取签章div的信息
        // for (const ele of document.getElementsByName('seal_img_div')) {
        //   this.addEventOnSealDiv(
        //     ele,
        //     JSON.parse(ele.dataset.sesSignature),
        //     JSON.parse(ele.dataset.signedInfo),
        //   );
        // }
      },
      fail(error) {
        console.log('error', error);
      },
    });
  };
  return (
    <div>
      <button onClick={onClickOfd}>打开odf</button>
      <input
        type="file"
        onChange={(e) => {
          const file = e.target.files[0];
          fileData = file;
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function (e) {
            // fileData = e.target.result.split(',')[1];
          };
        }}
      ></input>
      <div id="content">
        <div className="seal_img_div"></div>
      </div>
    </div>
  );
};

export default TestMain;
